<template>
    <div class="power-chart-container">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'PowerConsumptionChart',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initChart();
            }, 500);
        });
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        initChart() {
            // 初始化图表
            this.chart = echarts.init(this.$refs.chartContainer);
            const option = {
                title: {
                    text: '单位：kWh',
                    left: 30,
                    textStyle: {
                        color: '#B4B9BD', // 文字颜色
                        fontSize: 12, // 字号
                        fontFamily: 'Arial', // 字体
                    },
                },
                series: {
                    type: 'sankey',
                    layout: 'none',
                    top: 30,
                    left: 30,
                    right: 30,
                    width: '100%',
                    emphasis: {
                        focus: 'adjacency',
                    },
                    data: [
                        {
                            name: 'a',
                        },
                        {
                            name: 'b',
                        },
                        {
                            name: 'a1',
                        },
                        {
                            name: 'a2',
                        },
                        {
                            name: 'b1',
                        },
                        {
                            name: 'c',
                        },
                    ],
                    links: [
                        {
                            source: 'a',
                            target: 'a1',
                            value: 5,
                        },
                        {
                            source: 'a',
                            target: 'a2',
                            value: 3,
                        },
                        {
                            source: 'b',
                            target: 'b1',
                            value: 8,
                        },
                        {
                            source: 'a',
                            target: 'b1',
                            value: 3,
                        },
                        {
                            source: 'b1',
                            target: 'a1',
                            value: 1,
                        },
                        {
                            source: 'b1',
                            target: 'c',
                            value: 2,
                        },
                    ],
                    levels: [
                        {
                            depth: 0,
                            itemStyle: {
                                color: '#fbb4ae',
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6,
                            },
                        },
                        {
                            depth: 1,
                            itemStyle: {
                                color: '#b3cde3',
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6,
                            },
                        },
                        {
                            depth: 2,
                            itemStyle: {
                                color: '#ccebc5',
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6,
                            },
                        },
                        {
                            depth: 3,
                            itemStyle: {
                                color: '#decbe4',
                            },
                            lineStyle: {
                                color: 'source',
                                opacity: 0.6,
                            },
                        },
                    ],
                },
            };

            this.chart.setOption(option);
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
    },
};
</script>

<style scoped>
.power-chart-container {
    width: 100%;
    height: 500px;
    background: #fff;
    padding: 16px;
}

.chart-container {
    width: 100%;
    height: 100%;
}
</style>
